<template>
  <div style="border:4px solid red">
    这里是一级路由的页面
    <br>
    <!-- 第一种方式，v-bind的对象形式动态绑定data中的值！url="/two/8888" -->
    <router-link :to="{path:'/two/'+ userid}">二级路由页面展示使用router配置的path属性</router-link>
    <!-- 第二种方式，v-bind的对象形式动态绑定data中的值！url="/two/8888" -->
    <router-link :to="{name: 'Two', params: {userid: userid}}">二级路由页面展示使用router配置的name属性</router-link>
    <!-- 一级路由显示的页面中，如有路由出口则对应二级路由页面！ -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'one',
  data() {
    return {
      userid: '8888',
    }
  },
  created() {
    //因为没有路径参数，所以params和query是空的
    console.log(this.$route)
  },
}
</script>

<style>
</style>